<template>
  <div id="userinfo">
        <div class="split10"></div>
        <h3 class="font24">{{roomdata.roomTitle}}</h3>
        <h3 class="font16 fontFamilyEnglish">{{roomdata.roomTitleEn}}</h3>
        
        <!-- <div class="icon_div">
              <span class="in">
            <mu-icon value="camera_alt" :size="16"/>
            验证
        </span>
        <span class="in">
            <mu-icon value="camera_alt" :size="16"/>
            实拍
        </span>
        <span class="in">
            <mu-icon value="textsms" :size="16"/>
            评价
        </span>
        
         </div> -->
        
         <!-- <div class="split10"></div> -->
         <img @click="gotohousekeeperInfo" class="img_fd" src="http://www.touxiangsky.com/image/allimg/130104/3-www.touxiangsky.com-130104150355-www.touxiangsky.com-50.jpg" alt="">
         <!-- <img @click="gotohousekeeperInfo" class="img_fd" :src="baseurl + roomdata.imageUrl" alt=""> -->
         <div class="fd_name font16">{{roomdata.stewardName}}</div>
         <!-- <div class="fd_name font16">小花</div> -->
         <div class="realIdentity font12">
             <mu-icon value="textsms" :size="14"/>
             实名认证·房屋管家
         </div>
         <div class="split10"></div>
         <div class="p_center">
            <a @click="gotoMsglist" class="btn_detail">
                <mu-icon value="forum" :size="16"/>
                联系管家
            </a>
         </div>
          <!--<div class="p_center">
            <a href="" class="btn_detail">
                <mu-icon value="forum" :size="16"/>
                打电话给管家
            </a>
         </div>-->
  </div>
</template>

<script>
    //require('../../assets/css/personalcenter.scss'); //引入的scss
    import {
        mapState,
        mapGetters,
        mapMutations,
        mapActions
    } from 'vuex'
    import API from '../../../api/index'
    export default {
        name: 'userinfo', //组件的名字
        data() {
            return { //数据
                msg: '水萝卜',
                size: 12,
                color: '#ccc',
                test: {},
                searchRooms:{},
                sle:{

                },
                baseurl:$.hsf.baseurl,
            }
        },
        methods: { //方法
            gotoMsglist(){
                this.$router.push({
                    path:'./msglist',
                    query:{stewardId:this.roomdata.stewardId,name:this.msg}
                    //query:{stewardId:this.roomdata.stewardId,name:this.roomdata.stewardName}//获取管家id和管家姓名
                })
            },
            gotohousekeeperInfo() {
                this.$router.push({
                    path: './housekeeperInfo'
                })
            },
            //  ...mapMutations(['hideprogressfun', 'showprogressfun']),
            test1: function() {
                var vm = this
                API.oneaxios(1).then(function(res) {
                    vm.test = res
                })
            },
            searchRoom:function(){
                var vm=this
                API.searchRooms().then((res)=>{
                      vm.searchRooms = res
                })
            }
        },
        computed: { //计算 用来引入vuex里面state
           ...mapState(['roomdata'])
        },
        mounted: function() { //组件加载完成
            var vm = this
        },
        watch: { //健康某个数据变化后触发某个事件

        },
        destroyed: function() { //离开这个组件
        },
        components: {

        }
    }
</script>
<style scoped>
    h3 {}
    
    .font24 {
        color: #333333;
    }
    
    #userinfo {
        text-align: center;
    }
    
    .icon_div {
        color: #999;
        padding: 3px 0 10px;
        text-align: center;
    }
    
    .icon_div>span {
        display: inline-block;
        height: 18px;
        vertical-align: middle;
        margin: 0 4px 3px 4px;
    }
    
    .icon_div>span i {
        display: inline-block;
        margin-right: 3px;
        vertical-align: -3px;
    }
    
    .img_fd {
        width: 60px;
        height: 60px;
        border-radius: 4px;
        -webkit-border-radius: 4px;
        margin:5px 0;
    }
    
    .fd_name {
        color: #333;
    }
    
    .realIdentity i {
        vertical-align: -4px;
    }
    
    .p_center {
        text-align: center;
        font-size: 14px;
        color: #999;
    }
    
    .btn_detail {
        color: #ff5a5f;
        display: inline-block;
        border: 1px solid #ff5a5f;
        width: 150px;
        height: 30px;
        text-align: center;
        line-height: 30px;
        padding: 0 5px;
        border-radius: 2px;
    }
    
    .btn_detail i {
        vertical-align: -3px;
    }
</style>
<!-- Add "scoped" attribute to limit CSS to this component only -->